<script lang="ts" setup>
    import { ref } from 'vue'

    const activeIndex = ref('1')
    const handleSelect = (key: string, keyPath: string[]) => {
        console.log(key, keyPath)
    }
</script>

<template>
    <el-header>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
            router
        >
            <el-menu-item index="0">
                <img
                    style="width: 100px"
                    src="/src/assets/logo.svg"
                    alt="Element logo"
                />
            </el-menu-item>
            <el-menu-item index="/images/image">图片</el-menu-item>
            <el-sub-menu index="2">
                <template #title>一个下拉菜单</template>
                <el-menu-item index="2-1">item one</el-menu-item>
                <el-menu-item index="2-2">item two</el-menu-item>
                <el-menu-item index="2-3">item three</el-menu-item>
                <el-sub-menu index="2-4">
                    <template #title>item four</template>
                    <el-menu-item index="2-4-1">item one</el-menu-item>
                    <el-menu-item index="2-4-2">item two</el-menu-item>
                    <el-menu-item index="2-4-3">item three</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="/admin">我的</el-menu-item>
        </el-menu>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main class="full-height-container">
        <router-view></router-view>
    </el-main>
</template>

<style lang="scss">
    .el-menu--horizontal > .el-menu-item:nth-child(1) {
        margin-right: auto;
    }

    /* 保证 full-height-container 占满剩余空间 */
    .full-height-container {
        display: flex;
        flex-direction: column;
        height: 10vh; /* 确保容器占满视口高度 */
    }

    /* 设置 body 和 html 的高度为 100% */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /* 确保 router-view 占据剩余空间 */
    .full-height-container > router-view {
        flex: 1;
        overflow: auto; /* 可选：如果内容超出高度，允许滚动 */
    }
</style>
